---
title: "Outline"
description: "Utilities for controlling an element's outline."
---

import plugin from 'tailwindcss/lib/plugins/outline'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { Heading } from '@/components/Heading'

export const classes = { plugin }

## Remove outlines

Use `outline-none` to hide the default browser outline on focused elements.

It is highly recommended to apply your own focus styling for accessibility when using this utility.

```html amber
<template preview>
  <div class="flex space-x-6 justify-center">
    <input type="text" class="px-4 py-3 leading-5 border rounded-md" placeholder="Default focus style" />
    <input type="text" class="px-4 py-3 leading-5 border rounded-md focus:outline-none focus:ring focus:border-blue-400" placeholder="Custom focus style" />
  </div>
</template>

<input type="text"
  placeholder="Default focus style"
  class="..." />

<input type="text"
  placeholder="Custom focus style"
  class="**focus:outline-none focus:ring focus:border-blue-300** ..." />
```

The `outline-none` utility is implemented using a transparent outline under the hood to ensure elements are still visibly focused to [Windows high contrast mode](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/) users.

## Dotted outlines

Use the `outline-white` and `outline-black` utilities to add a 2px dotted border around an element with a 2px offset. These are useful as an accessible general purpose custom focus style if you don't want to design your own.

```html
<template preview class="flex">
  <div class="min-w-0 flex-1 bg-gray-100 p-10 flex items-center justify-center">
    <button type="button" class="px-6 py-3 rounded-md font-semibold bg-blue-600 text-white focus:outline-black">Button A</button>
  </div>
  <div class="min-w-0 flex-1 bg-blue-700 p-10 flex items-center justify-center">
    <button type="button" class="px-6 py-3 rounded-md font-semibold bg-white text-gray-900 focus:outline-white">Button B</button>
  </div>
</template>

<button class="**focus:outline-black** ...">Button A</button>
<button class="**focus:outline-white** ...">Button B</button>
```

## Customizing

### Outlines

By default, Tailwind provides three outline utilities. You can customize these by editing the `theme.outline` section of your `tailwind.config.js` file.

```js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: '2px solid #0000ff',
        }
      }
    }
  }
```

You can also provide an `outline-offset` value for any custom outline utilities using a tuple of the form `[outline, outlineOffset]`:

```js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: ['2px solid #0000ff', '1px'],
        }
      }
    }
  }
```

### Variants

<Variants plugin="outline" />

### Disabling

<Disabling plugin="outline" />
